<template>
	<view class="avatar" :class="[`avatar--${props.shape}`]" :style="[{
			width: addUnit(props.size),
			height: addUnit(props.size),
		}, addStyle(props.customStyle)]">
		<image class="avatar__image" :class="[`avatar__image--${props.shape}`]" :src="avatarUrl" :mode="props.mode"
			@error="errorHandler" :style="[{
					width: addUnit(props.size),
					height: addUnit(props.size),
				}]"></image>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
	} from 'vue';
	import * as test from '@/utils/test';

	const props = defineProps({
		src: {
			type: String,
		},
		mode: {
			type: String,
			default: 'scaleToFill',
		},
		shape: {
			type: String,
			default: 'shape',
		},
		size: {
			type: [String, Number],
			default: '20',
		},
		customStyle: {
			type: String,
		},
	});

	let avatarUrl = ref(props.src);

	const addUnit = (e, unit = 'px') => {
		if (isNaN(e)) {
			return e;
		} else {
			return e + unit;
		}
	}

	const addStyle = (e, target = 'object') => {
		// 字符串转字符串，对象转对象情形，直接返回
		if (test.empty(e) || typeof(e) === 'object' && target === 'object' || target ===
			'string' &&
			typeof(e) === 'string') {
			return e
		}
		// 字符串转对象
		if (target === 'object') {
			// 去除字符串样式中的两端空格(中间的空格不能去掉，比如padding: 20px 0如果去掉了就错了)，空格是无用的
			e = trim(e)
			// 根据";"将字符串转为数组形式
			const styleArray = e.split(';')
			const style = {}
			// 历遍数组，拼接成对象
			for (let i = 0; i < styleArray.length; i++) {
				// 'font-size:20px;color:red;'，如此最后字符串有";"的话，会导致styleArray最后一个元素为空字符串，这里需要过滤
				if (styleArray[i]) {
					const item = styleArray[i].split(':')
					style[trim(item[0])] = trim(item[1])
				}
			}
			return style
		}
		// 这里为对象转字符串形式
		let string = ''
		for (const i in e) {
			// 驼峰转为中划线的形式，否则css内联样式，无法识别驼峰样式属性名
			const key = i.replace(/([A-Z])/g, '-$1').toLowerCase()
			string += `${key}:${e[i]};`
		}
		// 去除两端空格
		return trim(string)
	}

	const errorHandler = () => {
		avatarUrl.value = '/static/img/common/default.png';
	}

	watch(() => props.src, (val) => {
		avatarUrl.value = val;
	})
</script>

<style lang="scss">
	.avatar {
		background: transparent;
		// #ifndef APP-NVUE
		display: flex;
		// #endif
		align-items: center;
		justify-content: center;

		&--circle {
			border-radius: 750rpx;
		}

		&--square {
			border-radius: 4px;
		}

		&__image {
			&--circle {
				border-radius: 750rpx;
			}

			&--square {
				border-radius: 4px;
			}
		}
	}
</style>
